
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../assets/css/mainIndex.css">
</head>
<body>
<%@ include file="components/bankgroundImg.jsp" %>
<div class="container">
    <%@ include file="components/top.jsp" %>
    <%@ include file="components/logosearchshelf.jsp" %>
    <%@ include file="components/topNav.jsp"%>
    <%@ include file="components/NavCarouseGitee.jsp"%>
    <mao class="fenge"></mao>
    <div class="books">
        <div class="abook">
            <!-- <img src="https://via.placeholder.com/150" alt="书籍封面1" />  -->
            <img src="../assets/images/4s.jpg" alt="书籍封面1" />
            <div class="info">
                <div class="title">书籍标题1</div>
                <div class="type">类型1</div>
            </div>
        </div>
<%--        <c:forEach var="book" items="${bookList}">--%>
<%--            <div class="abook">--%>
<%--                <img src="${book.imageSrc}" alt="${book.title}" />--%>
<%--                <div class="info">--%>
<%--                    <div class="title">${book.title}</div>--%>
<%--                    <div class="type">${book.type}</div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </c:forEach>--%>
    </div>
    <%@ include file="components/footer.jsp"%>
    <script>
        const lis = document.querySelectorAll("nav li");
        console.log(lis);
        lis.forEach((li) => {
            li.addEventListener("click", () => {
                const mao = document.querySelector("mao");
                if (mao) {
                    mao.scrollIntoView({
                        block: "start",
                        behavior: "smooth",
                    });
                }
            });
        });

    </script>
</div>

</body>
</html>
